<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Col,
  DatePicker,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Radio,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
  Upload,
} from 'ant-design-vue';

import StatisticsCard from '#/components/hotel/StatisticsCard.vue';

// 状态管理
const loading = ref(false);
const showAddModal = ref(false);
const showDetailModal = ref(false);
const isEdit = ref(false);
const selectedAnnouncement = ref(null);

// 表单引用
const formRef = ref();

// 统计数据
const statistics = reactive({
  totalAnnouncements: 156,
  totalChange: 12,
  todayAnnouncements: 8,
  todayChange: 3,
  readRate: 85.6,
  readRateChange: 2.1,
  pushSuccess: 92.3,
  pushChange: 1.5,
});

// 搜索表单
const searchForm = reactive({
  title: '',
  type: '',
  status: '',
  publisher: '',
  publishDate: null,
});

// 公告表单
const form = reactive({
  title: '',
  type: 'notice',
  summary: '',
  content: '',
  targetRoles: [],
  notifyMethods: ['app'],
  status: 'draft',
  scheduledTime: null,
  priority: 'normal',
  expireTime: null,
  attachments: [],
  remarks: '',
});

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入公告标题' }],
  type: [{ required: true, message: '请选择公告类型' }],
  summary: [{ required: true, message: '请输入公告摘要' }],
  content: [{ required: true, message: '请输入公告内容' }],
  targetRoles: [{ required: true, message: '请选择目标角色' }],
  notifyMethods: [{ required: true, message: '请选择通知方式' }],
  status: [{ required: true, message: '请选择发布状态' }],
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 公告数据
const announcements = ref([
  {
    id: 1,
    title: '关于电梯维修的通知',
    summary: '1号楼电梯将于明日进行维修，请住户注意安全',
    content:
      '尊敬的用户，1号楼电梯将于2024年1月20日进行定期维修，维修时间为上午9:00-下午5:00。维修期间电梯将暂停使用，请住户提前安排出行时间，给您带来的不便敬请谅解。',
    type: 'maintenance',
    status: 'published',
    priority: 'high',
    publisher: '张经理',
    publishTime: '2024-01-19 10:30',
    targetRoles: ['tenants', 'staff'],
    notifyMethods: ['app', 'sms'],
    readCount: 156,
    totalCount: 180,
    readRate: 86.7,
    attachments: [{ name: '维修通知.pdf', url: '#' }],
    remarks: '重要通知，需要重点关注',
  },
  {
    id: 2,
    title: '春节放假安排通知',
    summary: '春节期间物业服务中心放假安排',
    content:
      '尊敬的业主，春节即将来临，物业服务中心将于2024年2月10日-2月17日放假，期间将安排值班人员处理紧急事务。祝大家春节快乐！',
    type: 'notice',
    status: 'published',
    priority: 'normal',
    publisher: '李主管',
    publishTime: '2024-01-18 14:20',
    targetRoles: ['all'],
    notifyMethods: ['app', 'email'],
    readCount: 245,
    totalCount: 280,
    readRate: 87.5,
    attachments: [],
    remarks: '节日通知',
  },
  {
    id: 3,
    title: '消防安全检查通知',
    summary: '本周五将进行消防安全检查，请配合',
    content:
      '为了确保小区消防安全，物业将于本周五（1月26日）上午9:00-12:00进行消防安全检查，请各位住户配合检查工作。',
    type: 'policy',
    status: 'scheduled',
    priority: 'high',
    publisher: '王队长',
    publishTime: '2024-01-25 09:00',
    targetRoles: ['tenants', 'security'],
    notifyMethods: ['app', 'sms', 'wechat'],
    readCount: 0,
    totalCount: 180,
    readRate: 0,
    attachments: [],
    remarks: '安全检查通知',
  },
  {
    id: 4,
    title: '小区环境整治活动',
    summary: '本周六将开展小区环境整治活动，欢迎参与',
    content:
      '为了改善小区环境，物业将于本周六（1月27日）上午9:00-11:00开展环境整治活动，欢迎各位业主积极参与。',
    type: 'event',
    status: 'draft',
    priority: 'normal',
    publisher: '陈主任',
    publishTime: '',
    targetRoles: ['tenants', 'staff'],
    notifyMethods: ['app'],
    readCount: 0,
    totalCount: 0,
    readRate: 0,
    attachments: [],
    remarks: '活动通知',
  },
]);

// 表格列定义
const columns = [
  {
    title: '公告标题',
    dataIndex: 'title',
    key: 'title',
    width: 300,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '目标角色',
    dataIndex: 'targetRoles',
    key: 'targetRoles',
    width: 150,
  },
  {
    title: '通知方式',
    dataIndex: 'notifyMethods',
    key: 'notifyMethods',
    width: 150,
  },
  {
    title: '发布人员',
    dataIndex: 'publisher',
    key: 'publisher',
    width: 100,
  },
  {
    title: '发布时间',
    dataIndex: 'publishTime',
    key: 'publishTime',
    width: 150,
  },
  {
    title: '阅读数',
    dataIndex: 'readCount',
    key: 'readCount',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 250,
    fixed: 'right',
  },
];

// 过滤后的公告数据
const filteredAnnouncements = computed(() => {
  let result = announcements.value;

  if (searchForm.title) {
    result = result.filter((item) =>
      item.title.toLowerCase().includes(searchForm.title.toLowerCase()),
    );
  }

  if (searchForm.type) {
    result = result.filter((item) => item.type === searchForm.type);
  }

  if (searchForm.status) {
    result = result.filter((item) => item.status === searchForm.status);
  }

  if (searchForm.publisher) {
    result = result.filter((item) =>
      item.publisher.toLowerCase().includes(searchForm.publisher.toLowerCase()),
    );
  }

  if (searchForm.publishDate) {
    result = result.filter((item) =>
      item.publishTime.includes(searchForm.publishDate),
    );
  }

  return result;
});

// 类型相关函数
const getTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    notice: 'blue',
    maintenance: 'orange',
    emergency: 'red',
    policy: 'green',
    event: 'purple',
  };
  return colors[type] || 'default';
};

const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    notice: '通知公告',
    maintenance: '维修通知',
    emergency: '紧急通知',
    policy: '政策通知',
    event: '活动通知',
  };
  return texts[type] || type;
};

// 状态相关函数
const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    draft: 'default',
    published: 'green',
    scheduled: 'blue',
    expired: 'red',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    draft: '草稿',
    published: '已发布',
    scheduled: '定时发布',
    expired: '已过期',
  };
  return texts[status] || status;
};

// 角色相关函数
const getRoleText = (role: string) => {
  const texts: Record<string, string> = {
    all: '全部人员',
    tenants: '租客',
    staff: '工作人员',
    maintenance: '维修人员',
    cleaning: '清洁人员',
    security: '安保人员',
    management: '管理人员',
  };
  return texts[role] || role;
};

// 通知方式相关函数
const getMethodColor = (method: string) => {
  const colors: Record<string, string> = {
    app: 'blue',
    sms: 'green',
    email: 'orange',
    wechat: 'green',
    voice: 'purple',
  };
  return colors[method] || 'default';
};

const getMethodText = (method: string) => {
  const texts: Record<string, string> = {
    app: 'APP推送',
    sms: '短信通知',
    email: '邮件通知',
    wechat: '微信通知',
    voice: '语音通知',
  };
  return texts[method] || method;
};

// 优先级相关函数
const getPriorityColor = (priority: string) => {
  const colors: Record<string, string> = {
    low: 'green',
    normal: 'blue',
    high: 'orange',
    urgent: 'red',
  };
  return colors[priority] || 'default';
};

const getPriorityText = (priority: string) => {
  const texts: Record<string, string> = {
    low: '低',
    normal: '普通',
    high: '高',
    urgent: '紧急',
  };
  return texts[priority] || priority;
};

// 事件处理函数
const handleSearch = () => {
  pagination.current = 1;
  message.success('搜索完成');
};

const handleReset = () => {
  Object.assign(searchForm, {
    title: '',
    type: '',
    status: '',
    publisher: '',
    publishDate: null,
  });
  pagination.current = 1;
  message.success('重置完成');
};

const handleSave = async () => {
  try {
    await formRef.value.validate();
    if (isEdit.value) {
      message.success('公告更新成功');
    } else {
      message.success('公告发布成功');
    }
    showAddModal.value = false;
    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  showAddModal.value = false;
  resetForm();
};

const viewDetail = (record: any) => {
  selectedAnnouncement.value = record;
  showDetailModal.value = true;
};

const editAnnouncement = (record: any) => {
  isEdit.value = true;
  Object.assign(form, record);
  showAddModal.value = true;
};

const publishAnnouncement = (record: any) => {
  message.success(`公告"${record.title}"发布成功`);
};

const resendNotification = (record: any) => {
  message.success(`公告"${record.title}"通知重发成功`);
};

const deleteAnnouncement = (record: any) => {
  message.success(`公告"${record.title}"删除成功`);
};

const beforeUpload = (file: any) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件大小不能超过10MB!');
  }
  return false;
};

const resetForm = () => {
  Object.assign(form, {
    title: '',
    type: 'notice',
    summary: '',
    content: '',
    targetRoles: [],
    notifyMethods: ['app'],
    status: 'draft',
    scheduledTime: null,
    priority: 'normal',
    expireTime: null,
    attachments: [],
    remarks: '',
  });
  isEdit.value = false;
};

onMounted(() => {
  // 初始化数据
  pagination.total = announcements.value.length;
});
</script>

<template>
  <div class="announcement-management">
    <div class="page-header">
      <h2>公告管理</h2>
      <Button type="primary" @click="showAddModal = true">
        <IconifyIcon icon="ant-design:plus-outlined" />
        发布公告
      </Button>
    </div>

    <!-- 统计卡片 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="总公告数"
          :value="statistics.totalAnnouncements"
          :change="statistics.totalChange"
          icon="ant-design:notification-outlined"
          color="#1890ff"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="今日发布"
          :value="statistics.todayAnnouncements"
          :change="statistics.todayChange"
          icon="ant-design:calendar-outlined"
          color="#52c41a"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="已读率"
          :value="statistics.readRate"
          :change="statistics.readRateChange"
          icon="ant-design:eye-outlined"
          color="#faad14"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="推送成功"
          :value="statistics.pushSuccess"
          :change="statistics.pushChange"
          icon="ant-design:check-circle-outlined"
          color="#722ed1"
        />
      </Col>
    </Row>

    <!-- 搜索表单 -->
    <Card class="search-card">
      <Form layout="inline" :model="searchForm" class="search-form">
        <FormItem label="公告标题">
          <Input
            v-model:value="searchForm.title"
            placeholder="请输入公告标题"
            allow-clear
          />
        </FormItem>
        <FormItem label="公告类型">
          <Select
            v-model:value="searchForm.type"
            placeholder="请选择类型"
            allow-clear
            style="width: 120px"
          >
            <SelectOption value="notice">通知公告</SelectOption>
            <SelectOption value="maintenance">维修通知</SelectOption>
            <SelectOption value="emergency">紧急通知</SelectOption>
            <SelectOption value="policy">政策通知</SelectOption>
            <SelectOption value="event">活动通知</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="发布状态">
          <Select
            v-model:value="searchForm.status"
            placeholder="请选择状态"
            allow-clear
            style="width: 120px"
          >
            <SelectOption value="draft">草稿</SelectOption>
            <SelectOption value="published">已发布</SelectOption>
            <SelectOption value="scheduled">定时发布</SelectOption>
            <SelectOption value="expired">已过期</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="发布人员">
          <Input
            v-model:value="searchForm.publisher"
            placeholder="请输入发布人员"
            allow-clear
          />
        </FormItem>
        <FormItem label="发布时间">
          <DatePicker
            v-model:value="searchForm.publishDate"
            placeholder="选择日期"
            style="width: 150px"
          />
        </FormItem>
        <FormItem>
          <Space>
            <Button type="primary" @click="handleSearch">
              <IconifyIcon icon="ant-design:search-outlined" />
              搜索
            </Button>
            <Button @click="handleReset">
              <IconifyIcon icon="ant-design:reload-outlined" />
              重置
            </Button>
          </Space>
        </FormItem>
      </Form>
    </Card>

    <!-- 公告列表 -->
    <Card class="table-card">
      <Table
        :columns="columns"
        :data-source="filteredAnnouncements"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <div class="announcement-title">
              <div class="title-text">{{ record.title }}</div>
              <div class="title-desc">{{ record.summary }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'type'">
            <Tag :color="getTypeColor(record.type)">
              {{ getTypeText(record.type) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'targetRoles'">
            <div class="target-roles">
              <Tag
                v-for="role in record.targetRoles"
                :key="role"
                size="small"
                color="blue"
              >
                {{ getRoleText(role) }}
              </Tag>
            </div>
          </template>
          <template v-else-if="column.key === 'notifyMethods'">
            <div class="notify-methods">
              <Tag
                v-for="method in record.notifyMethods"
                :key="method"
                size="small"
                :color="getMethodColor(method)"
              >
                {{ getMethodText(method) }}
              </Tag>
            </div>
          </template>
          <template v-else-if="column.key === 'readCount'">
            <div class="read-info">
              <span class="read-count">{{ record.readCount }}</span>
              <span class="read-rate">({{ record.readRate }}%)</span>
            </div>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="viewDetail(record)">
                查看
              </Button>
              <Button
                type="link"
                size="small"
                @click="editAnnouncement(record)"
              >
                编辑
              </Button>
              <Button
                v-if="record.status === 'draft'"
                type="link"
                size="small"
                @click="publishAnnouncement(record)"
              >
                发布
              </Button>
              <Button
                v-if="record.status === 'published'"
                type="link"
                size="small"
                @click="resendNotification(record)"
              >
                重发
              </Button>
              <Button
                type="link"
                size="small"
                danger
                @click="deleteAnnouncement(record)"
              >
                删除
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 发布公告弹窗 -->
    <Modal
      v-model:open="showAddModal"
      title="发布公告"
      width="900px"
      @ok="handleSave"
      @cancel="handleCancel"
    >
      <Form ref="formRef" :model="form" :rules="rules" layout="vertical">
        <Row :gutter="16">
          <Col :span="16">
            <FormItem label="公告标题" name="title">
              <Input v-model:value="form.title" placeholder="请输入公告标题" />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="公告类型" name="type">
              <Select v-model:value="form.type" placeholder="请选择类型">
                <SelectOption value="notice">通知公告</SelectOption>
                <SelectOption value="maintenance">维修通知</SelectOption>
                <SelectOption value="emergency">紧急通知</SelectOption>
                <SelectOption value="policy">政策通知</SelectOption>
                <SelectOption value="event">活动通知</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="公告摘要" name="summary">
          <Textarea
            v-model:value="form.summary"
            placeholder="请输入公告摘要"
            :rows="2"
          />
        </FormItem>
        <FormItem label="公告内容" name="content">
          <Textarea
            v-model:value="form.content"
            placeholder="请输入公告内容"
            :rows="6"
          />
        </FormItem>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="目标角色" name="targetRoles">
              <Select
                v-model:value="form.targetRoles"
                placeholder="请选择目标角色"
                mode="multiple"
              >
                <SelectOption value="all">全部人员</SelectOption>
                <SelectOption value="tenants">租客</SelectOption>
                <SelectOption value="staff">工作人员</SelectOption>
                <SelectOption value="maintenance">维修人员</SelectOption>
                <SelectOption value="cleaning">清洁人员</SelectOption>
                <SelectOption value="security">安保人员</SelectOption>
                <SelectOption value="management">管理人员</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="通知方式" name="notifyMethods">
              <Select
                v-model:value="form.notifyMethods"
                placeholder="请选择通知方式"
                mode="multiple"
              >
                <SelectOption value="app">APP推送</SelectOption>
                <SelectOption value="sms">短信通知</SelectOption>
                <SelectOption value="email">邮件通知</SelectOption>
                <SelectOption value="wechat">微信通知</SelectOption>
                <SelectOption value="voice">语音通知</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="发布状态" name="status">
              <Radio.Group v-model:value="form.status">
                <Radio value="draft">保存草稿</Radio>
                <Radio value="published">立即发布</Radio>
                <Radio value="scheduled">定时发布</Radio>
              </Radio.Group>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem
              v-if="form.status === 'scheduled'"
              label="发布时间"
              name="scheduledTime"
            >
              <DatePicker
                v-model:value="form.scheduledTime"
                show-time
                placeholder="选择发布时间"
                style="width: 100%"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="优先级" name="priority">
              <Select v-model:value="form.priority" placeholder="请选择优先级">
                <SelectOption value="low">低</SelectOption>
                <SelectOption value="normal">普通</SelectOption>
                <SelectOption value="high">高</SelectOption>
                <SelectOption value="urgent">紧急</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="有效期至" name="expireTime">
              <DatePicker
                v-model:value="form.expireTime"
                show-time
                placeholder="选择过期时间"
                style="width: 100%"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="附件" name="attachments">
          <Upload
            v-model:file-list="form.attachments"
            :before-upload="beforeUpload"
            multiple
          >
            <Button>
              <IconifyIcon icon="ant-design:upload-outlined" />
              上传附件
            </Button>
          </Upload>
        </FormItem>
        <FormItem label="备注" name="remarks">
          <Textarea
            v-model:value="form.remarks"
            placeholder="请输入备注信息"
            :rows="2"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 公告详情弹窗 -->
    <Modal
      v-model:open="showDetailModal"
      title="公告详情"
      width="800px"
      :footer="null"
    >
      <Descriptions :column="2" bordered>
        <DescriptionsItem label="公告标题">
          {{ selectedAnnouncement?.title }}
        </DescriptionsItem>
        <DescriptionsItem label="公告类型">
          <Tag :color="getTypeColor(selectedAnnouncement?.type)">
            {{ getTypeText(selectedAnnouncement?.type) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="发布状态">
          <Tag :color="getStatusColor(selectedAnnouncement?.status)">
            {{ getStatusText(selectedAnnouncement?.status) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="优先级">
          <Tag :color="getPriorityColor(selectedAnnouncement?.priority)">
            {{ getPriorityText(selectedAnnouncement?.priority) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="发布人员">
          {{ selectedAnnouncement?.publisher }}
        </DescriptionsItem>
        <DescriptionsItem label="发布时间">
          {{ selectedAnnouncement?.publishTime }}
        </DescriptionsItem>
        <DescriptionsItem label="目标角色" :span="2">
          <div class="target-roles">
            <Tag
              v-for="role in selectedAnnouncement?.targetRoles"
              :key="role"
              color="blue"
            >
              {{ getRoleText(role) }}
            </Tag>
          </div>
        </DescriptionsItem>
        <DescriptionsItem label="通知方式" :span="2">
          <div class="notify-methods">
            <Tag
              v-for="method in selectedAnnouncement?.notifyMethods"
              :key="method"
              :color="getMethodColor(method)"
            >
              {{ getMethodText(method) }}
            </Tag>
          </div>
        </DescriptionsItem>
        <DescriptionsItem label="公告摘要" :span="2">
          {{ selectedAnnouncement?.summary }}
        </DescriptionsItem>
        <DescriptionsItem label="公告内容" :span="2">
          <div class="content-display">
            {{ selectedAnnouncement?.content }}
          </div>
        </DescriptionsItem>
        <DescriptionsItem label="阅读统计" :span="2">
          <div class="read-statistics">
            <div class="stat-item">
              <span class="stat-label">总人数：</span>
              <span class="stat-value">{{
                selectedAnnouncement?.totalCount
              }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已读人数：</span>
              <span class="stat-value">{{
                selectedAnnouncement?.readCount
              }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已读率：</span>
              <span class="stat-value"
                >{{ selectedAnnouncement?.readRate }}%</span
              >
            </div>
          </div>
        </DescriptionsItem>
        <DescriptionsItem label="附件" :span="2">
          <div
            v-if="selectedAnnouncement?.attachments?.length"
            class="attachments"
          >
            <div
              v-for="file in selectedAnnouncement.attachments"
              :key="file.name"
              class="attachment-item"
            >
              <IconifyIcon icon="ant-design:file-outlined" />
              <span class="file-name">{{ file.name }}</span>
              <Button type="link" size="small">下载</Button>
            </div>
          </div>
          <span v-else>无附件</span>
        </DescriptionsItem>
        <DescriptionsItem label="备注" :span="2">
          {{ selectedAnnouncement?.remarks || '无' }}
        </DescriptionsItem>
      </Descriptions>
    </Modal>
  </div>
</template>

<style scoped>
.announcement-management {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.statistics-row {
  margin-bottom: 24px;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.table-card {
  margin-bottom: 16px;
}

.announcement-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-text {
  font-weight: 500;
  color: #1890ff;
  cursor: pointer;
}

.title-text:hover {
  text-decoration: underline;
}

.title-desc {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.target-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.notify-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.read-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.read-count {
  font-weight: 500;
  color: #1890ff;
}

.read-rate {
  font-size: 12px;
  color: #999;
}

.content-display {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #333;
}

.read-statistics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  font-weight: 500;
  color: #666;
}

.stat-value {
  color: #1890ff;
  font-weight: 500;
}

.attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.file-name {
  flex: 1;
  font-size: 14px;
}

:deep(.ant-card-body) {
  padding: 12px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background-color: #fafafa;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}

:deep(.ant-upload-list) {
  margin-top: 8px;
}
</style>
